<template>
  <div><el-table :data="tableList" style="width: 100%">
    <el-table-column label="序号" width="80">
      <template slot-scope="scope">
        <span>{{ (pageIndex - 1) * 10 + scope.$index + 1 }}</span>
      </template>
    </el-table-column>
    <!-- 表格内容, prop 与传入 数据数组中每一项对应 -->
    <el-table-column prop="userName" label="人员名称" >
    </el-table-column>
    <el-table-column prop="regionName" label="归属区域" >
    </el-table-column>
     <el-table-column prop="role.roleName" label="角色" >
    </el-table-column>
     <el-table-column prop="mobile" label="联系电话" >
    </el-table-column>
    <el-table-column label="操作" width="200">

      <!-- 三个操作按钮 点击 触发对应三个父组件函数, 并传出 当前行信息 (scope.row) -->
      <template slot-scope="scope">
        <span class="blue" @click="$emit('alter', scope.row)"
          >修改</span
        >&emsp;
        <span class="red" @click="$emit('del',scope.row)"
          >删除</span
        >
      </template>
    </el-table-column>
  </el-table></div>
</template>

<script>
export default {
  props: {
    // 数据列表
    tableList: {
      type: Array,
      require: true
    },
    // 页数, 渲染序号使用
    pageIndex: {
      type: Number,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table {
  width: 100%;
  ::v-deep .el-table__header-wrapper {
    .el-table__header {
      width: 100% !important;
      thead tr {
        border-radius: 5px;
        overflow: hidden;
        th {
          background-color: #f3f6f8;
          color: #666;
          border: 0;
        }
      }
    }
  }
  ::v-deep .el-table__body-wrapper {
    .el-table__body {
      width: 100%  !important;
      tbody tr td {
        border: 0;
      }
    }
  }
}
</style>
